$(function () {
  var form = layui.form;
  // 1. 定义昵称规则
  form.verify({
    nickname: function (value) {
      if (value.length > 6) return "昵称长度必须在1~6个字符之间";
    },
  });

  // 2.2调用函数
  initUserInfo();
  // 2.获取数据
  // 2.1初始化用户的基本信息
  function initUserInfo() {
    $.ajax({
      type: "get",
      url: "/my/userinfo",
      success: function (res) {
        if (res.status !== 0) return layer.layui.msg(res.message);
        // 调用 form.val() 快速为表单赋值  第一个值是要赋值给哪个表单 在后边添加lay-filter="自定义名字"
        //第一个是字符串  第二个是数据对象  类似于模板引擎
        form.val("formUserInfo", res.data);
      },
    });
  }

  // 4.点击重置按钮 重新表单数据
  $(".layui-btn").on("click", function (e) {
    //4.1阻止默认行为
    e.preventDefault();
    //4.2调用函数 重新获取表单数据
    initUserInfo();
  });

  // 3.监听表单提交行为
  $(".layui-form").on("submit", function (e) {
    // 3.1阻止默认行为
    e.preventDefault();
    // 3.2发起ajax请求
    $.ajax({
      type: "POST",
      url: "/my/userinfo",
      //因为对象里面接口要求必须要传id  所以在html 添加了隐藏域来储存id
      data: $(this).serialize(), //快去获取表单里 有name属性的属性值
      success: function (res) {
        if (res.status !== 0) {
          return layui.layer.msg("更新用户信息失败");
        }
        layer.msg("更新用户信息成功！");
        // 3.3调用父页面中的方法，重新渲染用户的头像和用户的信息
        window.parent.getUserInfo();
      },
    });
  });
});
